<template>
    <div class="payment-container">
      <div class="payment-wrapper">
        <!-- 返回按钮 -->
        <div class="back-button" @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
          <span>返回</span>
        </div>
  
        <!-- 订单信息 -->
        <div class="order-info">
          <h2>订单信息</h2>
          <div class="product-info">
            <div class="product-image"></div>
            <div class="product-details">
              <div class="product-name">产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称</div>
              <div class="product-price">
                <span>人民币 (CNY)</span>
                <span>¥999.00</span>
              </div>
            </div>
          </div>
  
        <!-- 云豆选择 -->
<div class="cloud-beans">
  <div class="beans-info">
    <span>云豆 (共{{ totalBeans }}个)</span>
    <span class="select-link" @click="showBeanDialog">去选择 &gt;</span>
  </div>
  <div class="subtotal">
    <span>小计：</span>
    <span>¥{{ selectedBeansAmount > 0 ? selectedBeansAmount.toFixed(2) : '0.00' }}</span>
  </div>
</div>

<!-- 价格信息 -->
<div class="price-info">
  <div class="price-row">
    <span>总金额：</span>
    <span>¥{{ totalAmount.toFixed(2) }}</span>
  </div>
  <div class="price-row">
    <span>优惠金额：</span>
    <span>¥{{ discountAmount.toFixed(2) }}</span>
  </div>
  <div class="price-row total">
    <span>应付金额：</span>
    <span class="red-price">¥{{ finalAmount.toFixed(2) }}</span>
  </div>
</div>
        </div>
  
        <!-- 支付方式 -->
        <div class="payment-method">
          <div class="payment-amount">
            <span>应付金额：</span>
            <span class="red-price">¥{{finalAmount.toFixed(2)}}CNY</span>
          </div>
          <div class="contact-info">
            <span>如有疑问，请咨询：</span>
            <span>4000000000</span>
          </div>
  
          <!-- 支付方式选择 -->
          <div class="payment-options">
            <div class="payment-option" :class="{ active: paymentMethod === 'alipay' }" @click="paymentMethod = 'alipay'">
              <div class="radio-button">
                <div class="inner-circle" v-if="paymentMethod === 'alipay'"></div>
              </div>
              <div class="payment-icon alipay"></div>
              <span>支付宝</span>
            </div>
            <div class="payment-option" :class="{ active: paymentMethod === 'wechat' }" @click="paymentMethod = 'wechat'">
              <div class="radio-button">
                <div class="inner-circle" v-if="paymentMethod === 'wechat'"></div>
              </div>
              <div class="payment-icon wechat"></div>
              <span>微信</span>
            </div>
          </div>
  
          <!-- 支付按钮 -->
          <el-button type="primary" class="pay-button" @click="showPaymentDialog">立即支付</el-button>
        </div>
      </div>
  
      <!-- 云豆选择弹窗 -->
      <el-dialog v-model="beanDialogVisible" title="选择云豆使用量" width="400px" center>
        <div class="bean-dialog-content">
          <p class="bean-description">云豆抵扣说明：10豆=1元（人民币），抵扣使用需按照10的整数倍使用！</p>
          <el-select v-model="selectedBeans" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in beanOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="confirmBeanSelection">确定</el-button>
          </div>
        </template>
      </el-dialog>
  


<!-- 支付弹窗 -->
<el-dialog v-model="paymentDialogVisible" :title="paymentMethod === 'alipay' ? '支付宝支付' : '微信支付'" width="400px" center>
  <div class="payment-dialog-content">
    <div class="qr-code"></div>
    <p>扫描二维码完成支付</p>
    <div class="payment-amount">¥{{ finalAmount.toFixed(2) }} CNY</div>
  </div>
</el-dialog>

<!-- 支付成功弹窗 -->
<el-dialog v-model="successDialogVisible" width="400px" center>
  <div class="success-dialog-content">
    <div class="success-icon">
      <el-icon color="#FFFF" :size="40"><Check /></el-icon>
    </div>
    <h3>支付成功</h3>
    <p>付款金额：¥{{ finalAmount.toFixed(2) }}</p>
    <el-button type="primary" @click="goToOrder">查看订单</el-button>
  </div>
</el-dialog>
  
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  import { ArrowLeft, Check } from '@element-plus/icons-vue';
  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  
  // 支付方式
  const paymentMethod = ref('alipay');
  
  // 弹窗控制
  const beanDialogVisible = ref(false);
  const paymentDialogVisible = ref(false);
  const successDialogVisible = ref(false);
  
  // 价格和云豆数据
  const totalAmount = ref(333333.00); // 总金额
  const totalBeans = ref(999); // 总云豆数量
  const selectedBeans = ref(''); // 选择的云豆数量
  
  // 计算属性
  const selectedBeansAmount = computed(() => {
    return selectedBeans.value ? parseInt(selectedBeans.value) / 10 : 0;
  });
  
  const discountAmount = computed(() => {
    return selectedBeansAmount.value;
  });
  
  const finalAmount = computed(() => {
    return totalAmount.value - discountAmount.value;
  });
  
  // 云豆选项
  const beanOptions = ref([
    { value: '100', label: '100个云豆 (抵扣10元)' },
    { value: '200', label: '200个云豆 (抵扣20元)' },
    { value: '500', label: '500个云豆 (抵扣50元)' },
    { value: '1000', label: '1000个云豆 (抵扣100元)' }
  ]);
  
  // 返回上一页
  const goBack = () => {
    router.back();
  };
  
  // 显示云豆选择弹窗
  const showBeanDialog = () => {
    beanDialogVisible.value = true;
  };
  
  // 确认云豆选择
  const confirmBeanSelection = () => {
    beanDialogVisible.value = false;
    // 这里可以添加云豆选择后的逻辑
  };
  
  // 显示支付弹窗
  const showPaymentDialog = () => {
    paymentDialogVisible.value = true;
    
    // 模拟支付成功，3秒后显示支付成功弹窗
    setTimeout(() => {
      paymentDialogVisible.value = false;
      successDialogVisible.value = true;
    }, 3000);
  };
  
  // 跳转到订单页面
  const goToOrder = () => {
    successDialogVisible.value = false;
    router.push('/orders');
  };
  </script>
  
  <style scoped lang="scss">
  .payment-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    // background-color: #f5f5f5;
    min-height: 100vh;
  }
  
  .payment-wrapper {
    width: 1000px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
  }
  
  .back-button {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 20px;
    color: #333;
    
    span {
      margin-left: 5px;
    }
    
    &:hover {
      color: #409EFF;
    }
  }
  
  .order-info {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    
    h2 {
      font-size: 18px;
      margin-bottom: 20px;
      font-weight: 500;
    }
  }
  
  .product-info {
    display: flex;
    margin-bottom: 20px;
  }
  
  .product-image {
    width: 80px;
    height: 80px;
    background-color: #eee;
    margin-right: 15px;
    flex-shrink: 0;
  }
  
  .product-details {
    flex: 1;
  }
  
  .product-name {
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 1.4;
  }
  
  .product-price {
    display: flex;
    justify-content: space-between;
    color: #666;
  }
  
  .cloud-beans {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
  }
  
  .beans-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  
  .select-link {
    color: #126983;
    cursor: pointer;
  }
  
  .subtotal {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
  }
  
  .price-info {
    padding: 15px 0;
  }
  
  .price-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    
    &.total {
      font-weight: 600;
      font-size: 16px;
    }
  }
  
  .red-price {
    color: #f56c6c;
  }
  
  .payment-method {
    padding-top: 20px;
  }
  
  .payment-amount {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    margin-bottom: 10px;
  }
  
  .contact-info {
    display: flex;
    justify-content: flex-end;
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
  }
  
  .payment-options {
    margin-bottom: 30px;
  }
  
  .payment-option {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin-bottom: 15px;
    cursor: pointer;
    
    &.active {
      border-color: #409EFF;
    }
  }
  
  .radio-button {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #126983;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    
    .inner-circle {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #126983;
    }
  }
  
  .payment-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    
    &.alipay {
      background-image: url('/static/zhi.png');
    }
    
    &.wechat {
      background-image: url('/static/w.png');
    }
  }
  
  .pay-button {
    width: 100%;
    height: 44px;
    font-size: 16px;
  }
  
  // 云豆弹窗样式
  .bean-dialog-content {
    padding: 10px 0;
  }
  
  .bean-description {
    margin-bottom: 20px;
    line-height: 1.5;
    color: #666;
  }
  
  .dialog-footer {
    display: flex;
    justify-content: center;
  }
  
  // 支付弹窗样式
  .payment-dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
  }
  
  .qr-code {
    width: 200px;
    height: 200px;
    background-color: #eee;
    margin-bottom: 20px;
  }
  
  .payment-amount {
    font-size: 18px;
    color: #f56c6c;
    font-weight: 500;
    margin-top: 10px;
  }
  
  // 支付成功弹窗样式
  .success-dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
  }
  
  .success-icon {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #52C41A;
  }
  
  .success-dialog-content h3 {
    margin-bottom: 15px;
    font-weight: 500;
  }
  
  .success-dialog-content p {
    margin-bottom: 20px;
    color: #666;
  }
  </style>